<template>
	<view class="sbody">
		<view class="sbody" v-if="userId != null && userId != ''">
			<view class="authBody">
				<!-- 维修类型 -->
				<view class="property_wattanty_line">
					<view>
						<span class="iconfont" style="color:#1884eb;">&#xe625;</span>
						<text style="margin-left: 10px;">维修类型</text>

					</view>
					<view>
						<picker @change="bindPickerChange" :value="index" :range-key="'dictLabel'" :range="typeOptions">
							<view>
								<text class="uni-input">{{typeOptions[index].dictLabel}}</text>
								<span class="iconfont booking_info_icon">&#xe65c;</span>
							</view>
						</picker>
					</view>
				</view>

				<!-- 报修公司 -->
				<view class="property_wattanty_line">
					<view>
						<span class="iconfont" style="color:#1884eb;">&#xe6c9;</span>
						<text style="margin-left: 10px;">报修公司</text>
					</view>
					<view v-if="userInfo.deptName != undefined || userInfo.deptName != null">{{userInfo.deptName}}</view>
				</view>

				<!-- 服务时间 -->
				<view class="property_wattanty_line">
					<view>
						<span class="iconfont" style="color:#1884eb;">&#xe66e;</span>
						<text style="margin-left: 10px;">服务时间</text>
					</view>
					<view>
						<hTimePicker sTime="date1.getHours() < sT ? sT : date1.getHours()" cTime="23" interval="1"
							sDay="0" dayNum='7' @changeTime="bindDateChange">
							<view slot="pCon" class="changeTime">
								<view class="uni-input" v-if="date!=''">
									{{date}}
								</view>
								<view style="color: grey;" v-else>
									选择维修上门时间{{date}}
								</view>
							</view>
						</hTimePicker>
					</view>
				</view>
				<!-- 备注 -->
				<view class="property_wattanty_remark">
					<textarea class="register-input-textarea" v-model="matter" placeholder="请求维修内容进行详细描述"></textarea>
				</view>
				<!-- 图片附件 -->
				<view class="property_wattanty_img">
					<view>
						<span class="iconfont" style="color:#1884eb;">&#xe601;</span>
						<text style="margin-left: 10px;">图片附件</text>
					</view>
					<view>
						<view class="item-num">
							<view class="upload-img">
								<!-- 预览缩略图 -->
								<view class="q-image-wrap">
									<!-- 图片缩略图  -->
									<block>
										<view class="item" v-if="photoFiles != ''">
											<image class="q-image" :src="photoFiles" mode="aspectFill"
												:data-cur="imgItem.url" @tap="refundPicPreView"></image>
											</image>
											<!-- 移除图片的按钮  -->
											<view class="q-image-remover" @tap="removeImage">
												<image src="http://101.206.123.213:7051/static/image/common/删除.png"
													mode="">
												</image>
											</view>
										</view>
									</block>
									<!-- 添加图片图标 -->
									<view class="item" @tap="getUploadImg" v-if="photoFiles == ''">
										<image style="width: 100px;height: 100px;"
											src="http://101.206.123.213:7051/static/image/common/添加图片.png">
										</image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="submitButton">
					<button type="default" @click="formSubmit"
						style="width: 90%; background-color: #1884eb;color: white;">提交报修</button>
				</view>
			</view>
		</view>
		<view class="authBody_else" v-else>
			<view class="authBody_item">
				<view class="qrCodeNoPermission"></view>
				<view class="qrbottom">
					<view class="qrbottom_prompt">暂无权限,请联系管理员审核!</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hTimePicker from '@/components/h-timePicker/h-timePicker.vue';
	import {
		addRecord
	} from '@/common/js/api/serviceRecord.js';
	import {
		getDicts
	} from '@/common/js/api/dict/data.js';
	import {
		pathToBase64
	} from 'image-tools';
	import {
		listCompany
	} from '../../common/js/api/company.js';

	export default {
		components: {
			hTimePicker
		},
		data() {
			return {
				//上传图片列表
				photoFiles: "",
				hasPermission: false,
				date: '',
				matter: '',
				//用户基本信息
				userInfo: [],
				//类型字典
				typeOptions: [],
				index: 0,
				//用户id
				userId: "",
				//企业列表
				compList: [],
			}
		},
		onLoad() {
			//获取用户基本信息
			this.userInfo = uni.getStorageSync('userInfo')
			this.userId = this.userInfo.sysUser.userId
			//获取维修类型字典
			this.getDictsList()
			//获取企业名称
			this.getCompanyList()
		},
		methods: {
			//获取公司基本信息
			getCompanyList() {
				//检验是否为系统员工
				if (this.userInfo.sysUser.deptId != null && this.userInfo.sysUser.deptId != "") {
					this.userInfo.deptName = this.userInfo.sysDept.deptName
				} else {
					//获取企业信息列表
					listCompany().then(res => {
						this.compList = res.rows
						//获取企业名称
						for (let i in this.compList) {
							if (this.compList[i].compId === this.userInfo.sysUser.compId) {
								this.userInfo.deptName = this.compList[i].compName
							}
						}
					})
				}
			},
			getUploadImg: function(e) {
				let that = this
				console.log(e)
				let urls = ""
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						urls = res.tempFilePaths[0]
						uni.compressImage({
							src: urls,
							quality: 10,
							success: res => {
								pathToBase64(res.tempFilePath).then(base64 => {
									that.photoFiles = base64
								})
							},

						})
					},
					fail() {
						uni.showToast({
							title: "照片选择失败",
							icon: "none",
							duration: 2000
						})
					}
				})

			},
			/**
			 * 图片点击预览
			 */
			// refundPicPreView(e) {
			// 	var current = e.currentTarget.dataset.cur
			// 	var urls = []
			// 	this.photoFiles.forEach(el => {
			// 		urls.push(el.url)
			// 	})
			// 	uni.previewImage({
			// 		current: current,
			// 		urls: urls
			// 	})
			// },

			/**
			 * 删除图片
			 */
			removeImage: function() {
				this.photoFiles = ""

			},
			//获取维修类型字典
			getDictsList() {
				getDicts('t_service_type').then(res => {
					this.typeOptions = res.data

				})
			},
			//获取点击的值
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindDateChange(e) {
				this.date = e
			},
			//提交数据
			formSubmit() {
				var data = {};
				// data.compId = this.userInfo.compId;
				// data.compName = this.userInfo.company.compName;
				if (this.userInfo.sysUser.deptId != null) {
					data.compId = this.userInfo.sysUser.deptId;
				} else {
					data.compId = this.userInfo.sysUser.compId;
				}
				data.compName = this.userInfo.deptName;
				data.openId = this.userInfo.openid;
				data.userName = this.userInfo.sysUser.userName;
				data.userPhone = this.userInfo.sysUser.phoneNumber;
				data.serviceMatter = this.matter;
				data.serviceTime = this.date;
				data.serviceType = this.typeOptions[this.index].dictValue;
				data.matterImg = this.photoFiles;
				console.log(data)
				if (data.serviceTime == "") {
					uni.showModal({
						content: '请选择维修上门时间',
						showCancel: false
					})
				} else {
					addRecord(data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '提交成功',
								duration: 2000
							});
							//报修记录页面
							uni.navigateTo({
								url: "../warrantyManage/warrantyManage?name=" + "物业报修"
							});
						} else {
							uni.showModal({
								content: '提交失败',
								showCancel: false
							})
						}
					})
				}
			}
		},
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style lang="scss" scoped>
	.property_wattanty_remark {
		width: 86%;
		height: 20%;
		background-color: #eeeeee;
		margin: auto;
		margin-top: 25px;
		border-radius: 5px;
		padding: 10px;
		font-size: 12px;
	}

	.submitButton {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	// 单行预约信息
	.property_wattanty_line {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		line-height: 40px;
		border-bottom: 1px solid #eeeeee;
		width: 90%;
		margin: auto;
	}

	.property_wattanty_img {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 14px;
		line-height: 40px;
		width: 90%;
		margin: auto;
	}

	.item-num .upload-img .q-image-wrap {
		display: flex;
		/* height: 500rpx; */
		flex-wrap: wrap;
	}

	.item-num .upload-img .q-image-wrap .item {
		position: relative;
		height: 200rpx;
		width: 200rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.item-num .upload-img .q-image-wrap .item .q-image {
		height: 200rpx;
		width: 200rpx;
	}

	.item-num .upload-img .q-image-wrap .item .q-image-remover {
		width: 0;
		height: 0;
		border-top: 66rpx solid #f1f1f1;
		border-left: 66rpx solid transparent;
		position: absolute;
		top: 0;
		right: 0;
	}


	.item-num .upload-img .q-image-wrap .item .q-image-remover image {
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		top: -60rpx;
		right: 4rpx;
	}

	.authBody {
		width: 90%;
		margin: auto;
		height: 90%;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
		padding-top: 20px;


	}

	//button样式
	.submitButton button {
		width: 90%;
		color: white;
		background-color: #1884eb;
		margin-top: 5%;
	}

	.qrCodeNoPermission {
		width: 80%;
		padding-bottom: 80%;
		margin: 0 auto;
		background-image: url(http://101.206.123.213:7051/static/image/common/noPermission.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.qrbottom {
		text-align: center;
		width: 90%;
		margin: 0 auto;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 24rpx;
	}

	.qrbottom_prompt {
		font-weight: bold;
		font-size: 40rpx;
	}

	.authBody_else {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.authBody_item {
		width: 90%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 10px;
		background-color: white;
		box-shadow: 0px 5upx 5upx #999999;
	}

	.sbody {
		height: 100vh;
		background: url("http://101.206.123.213:7051/static/image/common/pic-background.png");
		background-size: cover;
		/* 第一个值为宽，第二个值为高，当设置一个值时，将其作为图片宽度来等比缩放 */
		background-repeat: no-repeat;
		background-color: white;
	}
</style>
